<script lang="ts">
  import { current_task, current_task_prompts } from "$lib/stores"
  import { page } from "$app/stores"
  import { type KilnError, createKilnError } from "$lib/utils/error_handlers"
  import { client } from "$lib/api_client"
  import AppPage from "../../../../../app_page.svelte"
  import Output from "../../../../../run/output.svelte"

  let prompt: string | null = null
  let prompt_loading = true
  let prompt_error: KilnError | null = null

  $: project_id = $page.params.project_id
  $: task_id = $page.params.task_id
  $: generator_id = $page.params.generator_id
  $: generator_name = $current_task_prompts?.generators.find(
    (generator) => generator.id === generator_id,
  )?.name
  $: generator_description = $current_task_prompts?.generators.find(
    (generator) => generator.id === generator_id,
  )?.description

  $: (() => {
    get_prompt(generator_id)
  })()

  async function get_prompt(prompt_generator: string | undefined) {
    if (!prompt_generator) {
      prompt = null
      return
    }
    try {
      prompt_loading = true
      const { data: prompt_response, error: get_error } = await client.GET(
        "/api/projects/{project_id}/task/{task_id}/gen_prompt/{prompt_id}",
        {
          params: {
            path: {
              project_id,
              task_id,
              prompt_id: prompt_generator,
            },
          },
        },
      )
      if (get_error) {
        throw get_error
      }
      prompt = prompt_response.prompt
    } catch (e) {
      prompt_error = createKilnError(e)
    } finally {
      prompt_loading = false
    }
  }
</script>

<div class="max-w-[1400px]">
  <AppPage
    title="Prompt Generator"
    subtitle={generator_name}
    breadcrumbs={[
      {
        label: "Prompts",
        href: `/prompts/${project_id}/${task_id}`,
      },
    ]}
  >
    {#if prompt_loading}
      <div class="w-full min-h-[50vh] flex justify-center items-center">
        <div class="loading loading-spinner loading-lg"></div>
      </div>
    {:else if $current_task?.id != task_id}
      <div class="text-error">
        This link is to another task's prompts. Either select that task in the
        sidebar, or click prompts in the sidebar to load the current task's
        prompts.
      </div>
    {:else if prompt && !prompt_error}
      <div>
        <h2 class="text-sm font-medium mt-4 mb-1">Generator Description</h2>
        <p class="mb-6 text-sm text-gray-500">
          {generator_description}
        </p>

        <h2 class="text-sm font-medium mt-4 mb-1">
          How to Improve this Prompt
        </h2>
        <p class="mb-6 text-sm text-gray-500">
          To improve the quality of this prompt, <a
            href={`/settings/edit_task/${project_id}/${task_id}`}
            class="link"
            >edit the task's prompt/instructions{generator_id !==
            "short_prompt_builder"
              ? " or requirements"
              : ""}</a
          ><span
            class={["simple_prompt_builder", "short_prompt_builder"].includes(
              generator_id,
            )
              ? "hidden"
              : ""}
            >, or add more high quality samples to your dataset by <a
              class="link"
              href="/run">running the task</a
            >
            and rating/repairing the output.
          </span>
        </p>

        <h2 class="text-sm font-medium mt-4 mb-1">Generated Prompt</h2>
        <p class="mb-2 text-sm text-gray-500">
          This is the current prompt generated by the &quot;{generator_name}&quot;
          generator. It may change over time if your underlying dataset or task
          definition changes.
        </p>
        <Output raw_output={prompt} />
      </div>
    {:else}
      <div class="text-error">
        {prompt_error?.getMessage() || "An unknown error occurred"}
      </div>
    {/if}
  </AppPage>
</div>
